<template>
  <div>
    <h2 class="page-title">公告列表</h2>
    <el-row class="mt20">
        <el-col :span="6" class="mr20">
           <el-input 
            placeholder="请输入搜索关键字"
            prefix-icon="el-icon-search" 
            v-model="search.keyword"
            type="text"
           ></el-input>
        </el-col>
        <el-col :span="6" class="mr20">
          <el-select  class="rolese"     v-model="search.role" placeholder="请选择公告类型">
            <el-option
              v-for="(item,index) in annoList"
              :key="index"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="success" @click="todoSearch">确认搜索</el-button>
        </el-col>
    </el-row>
    <el-row class="mt20">
      <el-col :span="22">
         <el-table :data="tabledata" style="width: 100%" center border>
             <el-table-column type="index" label="序号" width="50" />
              <el-table-column prop="title" label="标题" width="100" >
                  <template #default="scope">
                      <h6 class="atitle">{{scope.row.title}}</h6>
                  </template>
              </el-table-column>
              <el-table-column prop="author" label="发表人"  width="100">
                  <template #default="scope">
                      <h6 >{{scope.row.author}}</h6>
                  </template>
              </el-table-column>
              <el-table-column prop="type" label="类型"   width="100" >
                  <template #default="scope">
                      <el-tag  size="mini" :hit="true" effect="light" class="colorfff" :color="annoList.find(item=>item.value==scope.row.type).color">{{annoList.find(item=>item.value==scope.row.type).text}}</el-tag>
                  </template>
              </el-table-column>
              <el-table-column prop="time" label="发表时间"   width="260"   >
                  <template #default="scope">
                      <div>
                         {{ $filters.timeFormat(scope.row.time,'YYYY-MM-DD HH:mm:ss') }}
                      </div>
                  </template>
              </el-table-column>
              <el-table-column  label="操作"   width="auto"   >
                  <template #default="scope">
                      <el-button size="mini" type="primary" icon="el-icon-view" circle></el-button>
                      <el-button size="mini" type="success" icon="el-icon-delete" circle></el-button>
                      <el-button  size="mini" type="info" icon="el-icon-edit" circle></el-button>
                  </template>
              </el-table-column>
         </el-table>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import {reactive,toRefs,ref,computed,onMounted} from "vue"
import { ajax } from '../../service';

export default {
  name:"anno-list",
  setup(){
    const state = reactive({
      search:{},
      tabledata:[]
    })
    const todoSearch = ()=>{

    }
    const getAnnoList = async (options)=>{
        const {code,result} = await ajax.getannolist(options)
        if(code==200){
          state.tabledata = result;
        }
    }
    onMounted(()=>{
      getAnnoList()
    })
    return {
      ...toRefs(state),
      todoSearch
    }
  }
}
</script>

<style lang="scss">
.atitle{
  color:deeppink;
}
</style>